<template>
	<view class="auctionDetail">
		<header-box :title="pageTitle" :isShare="true"></header-box>
		<view class="auctionDetail-box" v-if="auctionData">
			<view class="lighting-bg"><image class="lighting-bg-img" src="../../static/img/lighting-bg.png" mode=""></image></view>
			<!-- 拍卖时间 -->
			<view class="auction-time" v-if="auctionData.auctionState == 1 && auctionData.countdown>0">
				<!-- <text>距拍卖结束：3天5小时48分58秒</text> -->
				<u-count-down
					:time="auctionData.countdown * 1000"
					format="DD:HH:mm:ss"
					autoStart
					millisecond
					@change="onChange"
				>
					<view class="time">
						<text>距拍卖结束：</text>
						<text class="time__item" v-if="timeData.hours>0">{{ timeData.days }}&nbsp;天</text>
						<text class="time__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}&nbsp;小时</text>
						<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
						<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
					</view>
				</u-count-down>
			</view>
			<!-- 拍卖时间结束 -->
			<view class="no-box" v-if="auctionData.countdown<=0"><text>来晚啦！拍卖结束了！瞧瞧别的吧～</text></view>
			<view class="no-box" v-if="auctionData.auctionState<1"><text>该藏品已下架，瞧瞧别的吧～</text></view>
			<view class="no-box" v-if="auctionData.auctionState == 2"><text>该藏品已被拍走，瞧瞧别的吧～</text></view>
			<!-- 放3d图 -->
			<view class="auctionDetail-3d-content" v-if="auctionData.auctionModel">
				<view class="auctionDetail-3d-content-model">
					<!-- <model-three
						src="https://hujiulong.github.io/vue-3d-model/static/models/json/scene.json"
						backgroundColor="rgba(22,24,29,0)"
					></model-three> -->
					<model-obj
						:src="auctionData.auctionModel"
						:mtl="auctionData.mtlModel"
						:rotation="rotation"
						@on-load="onLoading"
						backgroundColor="rgba(22,24,29,0)"
						:backgroundAlpha="0"
						:controlsOptions="{
						  enableZoom
						}"
					></model-obj>
				</view>
			</view>
			
			<!-- 图片模式 -->
			<view class="collectionDetail-img-model" v-else>
				<view class="collectionDetail-img-model-box">
					<view class="_img-model">
						<view class="_img-model-box">
							<image class="_img-model-bg" src="../../static/img/collection-bg.png" mode=""></image>
							<view class="_img-model-content">
								<image class="_img-model-content_img noSaveImg" :src="auctionData.auctionImg" mode=""></image>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 3d图的底座 -->
			<view class="auctionDetail-3d-bottom">
				<view class="auctionDetail-3d-bottom-box">
					<image class="auctionDetail-3d-bottom-img" src="../../static/img/3d-bottom-icon.png" mode=""></image>
					<view class="auctionDetail-info">
						<view class="auctionDetail-info-title"><text>{{auctionData.auctionName}}</text></view>
						<view class="auctionDetail-info-main">
							<text class="_info-main-l">{{auctionData.auctionLevel}}</text>
							<!-- <text class="_info-main-r"><text class="_info-main-r-text">剩余</text><text class="_info-main-r-num">1000份</text></text> -->
							<text class="_info-main-r"><text class="_info-main-r-text">一口价</text><text class="_info-main-r-num">￥{{auctionData.auctionBuyNow}}</text></text>
						</view>
					</view>
				</view>
			</view>
			<view class="auctionDetail-main">
				<view class="auctionDetail-main-box">
					<view class="auctionDetail-price"><text class="auctionDetail-price-text">当前价</text><text class="auctionDetail-price-num">￥{{auctionData.currentPrice || auctionData.auctionStartPrice || 0}}</text></view>
					<view class="auctionDetail-business">
						<view class="auctionDetail-business-item">
							<text class="auctionDetail-business-item-label">发行方：</text>
							<text class="auctionDetail-business-item-val">{{auctionData.auctionIssuer}}</text>
						</view>
						<view class="auctionDetail-business-item auctionDetail-business-item-top">
							<text class="auctionDetail-business-item-label">品牌方：</text>
							<text class="auctionDetail-business-item-val">{{auctionData.auctionBrand}}</text>
						</view>
					</view>
					
					<!-- <view class="auctionDetail-record">
						<u-collapse
							@change="recordChange"	
							@close="recordClose"	
							@open="recordOpen"	
							:border="false"
						>
							<u-collapse-item
							  title="出价记录"
							  name="record"
							>
								<view class="u-collapse-content" v-if="auctionData.bidOutFormList.length>0">
									<view class="collapse-content-item" v-for="item,index in auctionData.bidOutFormList" :key="index">
										<view class="collapse-content-item-name"><text>{{item.name}}</text><text class="_name-my" v-if="item.isMine == 1">我</text></view>
										<view class="collapse-content-item-money">
											<text v-if="index<1">最高出价 {{item.price}} 元</text>
											<text v-else>出价 {{item.price}} 元</text>
										</view>
									</view>
								</view>
							</u-collapse-item>
						</u-collapse>
					</view> -->
					
					<view class="auctionDetail-main-chunk">
						<view class="auctionDetail-main-chunk-header"><text>作品详情</text></view>
						<view class="auctionDetail-main-chunk-content">
							<view class="auctionDetail-main-chunk-content-box">
								<text>{{auctionData.auctionDescription}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="page-footer" :class="!pageFooterFlag?'page-footer-bottom':''">
				<view class="page-footer-box">
					<view class="page-footer-box-l">
			<!-- 			<view class="page-footer-box-l-label"><text>余额</text></view>
						<view class="page-footer-box-l-val" v-if="userInfo"><text>￥{{userInfo.balance}}</text></view> -->
					</view>
					<view class="page-footer-box-r" :class="(auctionData.auctionState != 1 || auctionData.countdown<=0)?'page-footer-box-r-no':''">
						<view class="page-footer-box-r-btn page-footer-box-r-btn-l" @click="offerPopuOpen">
							<text v-if="!token || depositState != 1">出价</text>
							<text v-else>继续出价</text>
						</view>
						<view class="page-footer-box-r-btn page-footer-box-r-btn-r" @click="tipPopupOpen">
							<text class="page-footer-box-r-btn-r-title" >一口价</text>
							<text class="page-footer-box-r-btn-r-money">￥{{auctionData.auctionBuyNow}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 弹窗 -->
			<u-popup :show="tipsShow" :round="20" mode="center" :overlayOpacity="0.8" @close="tipsPopupClose" @open="tipsPopupOpen" bgColor="transparent">
				<view class="tipsPopup">
					<view class="tipsPopup-icon"><image class="tipsPopup-icon-img" src="../../static/img/careful-icon.png" mode=""></image></view>
					<view class="tipsPopup-title"><text>购买前查阅</text></view>
					<view class="tipsPopup-text"><text>付款后商品自动上链，不可退换</text></view>
					<view class="tipsPopup-confirm" @click="toPay(bzj)"><text>我已知悉</text></view>
				</view>
			</u-popup>
			
			<!-- 继续出价 弹窗 -->
			<u-popup :show="offerShow" :round="20" mode="bottom" :overlayOpacity="0.8" @close="offerPopupClose" @open="offerPopupOpen" bgColor="transparent">
				<view class="offerPopup">
					<view class="offerPopup-line"></view>
					<view class="offerPopup-new-money"><text class="offerPopup-new-money-text">当前价</text><text class="offerPopup-new-money-num">￥{{auctionData.currentPrice || auctionData.auctionStartPrice || 0}}</text></view>
					<view class="offerPopup-main">
						<view class="offerPopup-main-box">
							<view class="offerPopup-main-option-price">
								<view class="_option-price-btn" @click="optionPrice(1)"><text>-{{oncePrice}}</text></view>
								<view class="_option-price-view"><text>{{myPriceNum}}元</text></view>
								<view class="_option-price-btn" @click="optionPrice(2)"><text>+{{oncePrice}}</text></view>
							</view>
							<view class="offerPopup-confirm" @click="toPay()"><text>确定出价</text></view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		
		<realname-popup :successShow="isRealName" @closeRealName="closeRealName"></realname-popup>
		
		<!-- 弹窗 -->
		<u-popup :show="successShow" :round="20" mode="center" :overlayOpacity="0.8" @close="successPopupClose" @open="successPopupOpen" bgColor="transparent">
			<view class="successPopup">
				<view class="tipsPopup-icon">
					<image class="tipsPopup-icon-img" src="../../static/img/success-icon.png" mode=""></image>
				</view>
				<view class="tipsPopup-text">
					<text>出价{{this.myPriceNum}}，出价成功</text>
				</view>
				<view class="tipsPopup-confirm" @click="confirmOk"><text>知道啦</text></view>
				<image class="cancel-icon" @click="successPopupClose" src="../../static/img/cancel-icon.png" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { ModelObj } from 'vue-3d-model'
	export default {
		data() {
			return {
				pageTitle:'',
				pageFooterFlag:true,
				pageScrollTimer:null,
				pageFooterFlag:true,
				tipsShow:false,
				timeData: {},
				offerShow:false,
				myPriceNum:0,
				oncePrice:0,
				auctionId:'',
				auctionData:null,
				rotation: {
					x: 0,
					y: 0,
					z: 0
				},
				enableZoom:false,
				userInfo:null,
				token:'',
				bzj:0,
				depositState:0,  // 0 未支付保证金  1  已支付保证金
				isRealName:false,
				successShow:false,
			};
		},
		components: {
			ModelObj
		},
		onLoad(option) {
			if (option.auctionId) {
				this.auctionId = option.auctionId
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token') || null;
			this.userInfo = uni.getStorageSync('userInfo') || null;
			if (this.auctionId) {
				this.getAuctionInfo()
			} else {
				let urlData = this.$util.getUrlVal();
				console.log(urlData)
				if (urlData.out_trade_no) {
					this.$api.getByOutTradeNo({
						outTradeNo:urlData.out_trade_no
					}).then(res => {
						console.log(res)
						if (res.code == 200) {
							this.auctionId = res.data.auctionId;
							this.getAuctionInfo()
						}
					})
				}
			}
		},
		methods:{
			async getInit() {
				if (this.token) {
					let data = await this.getAuctionNewestPrice()
					// console.log('data',data)
					this.auctionData.currentPrice = data.currentPrice || '';
					this.auctionData.auctionStartPrice = data.auctionStartPrice;
					this.depositState = data.depositState;
				}
			},
			// 一口价的未登录判定
			tipPopupOpen(){
				if (this.token && this.userInfo){
					if (this.auctionData.countdown<=0) {
						// uni.showToast({
						// 	title:'拍卖已结束',
						// 	icon:'none'
						// })
						return false
					}
					if (this.auctionData.auctionState!=1) {
						// uni.showToast({
						// 	title:'该藏品已被拍走',
						// 	icon:'none'
						// })
						return false
					}
					// 进行实名认证判断
					if (this.userInfo.authState == 1) {	
						// let data = await this.getAuctionNewestPrice()
						// this.depositState = data.depositState;
						// if (data.depositState != 1) {
						// 	// 未支付保证金
						// 	this.toPay(1);
						// } else {
						// 	this.toPay(1);
						// }
						this.toPay(1);
					} else {
						// 未认证
						this.isRealName = true;
					}
				}else{
					// 不存在跳转登录页
					this.checkLogin(`/pages/auctionDetail/auctionDetail?auctionId=${this.auctionId}`)
				}
			},
			// 继续出价的未登录判定
			async offerPopuOpen(){
				if (this.token && this.userInfo){
					if (this.auctionData.countdown<=0) {
						// uni.showToast({
						// 	title:'拍卖已结束',
						// 	icon:'none'
						// })
						return false
					}
					if (this.auctionData.auctionState!=1) {
						// uni.showToast({
						// 	title:'该藏品已被拍走',
						// 	icon:'none'
						// })
						return false
					}
					// 进行实名认证判断
					if (this.userInfo.authState == 1) {
						let data = await this.getAuctionNewestPrice()
						this.auctionData.currentPrice = data.currentPrice || '';
						this.auctionData.auctionStartPrice = data.auctionStartPrice;
						this.depositState = data.depositState;
						if (this.depositState != 1) {
							this.$api.deposit({
								auctionId:this.auctionId,
							}).then(res => {
								console.log(res)
								if (res.code == 200) {
									uni.navigateTo({
										url:`/pages/cashier/cashier?type=2&bzj=${res.data.price}&auctionId=${this.auctionId}&orderNo=${res.data.orderNo}`
									})
								}
							})
						} else { 
							this.offerShow = true;
						}
					} else {
						// 未认证
						this.isRealName = true;
					}
				}else{
					// 不存在跳转登录页
					// uni.navigateTo({
					// 	url:"/pages/login/login"
					// })
					this.checkLogin(`/pages/auctionDetail/auctionDetail?auctionId=${this.auctionId}`)
				}
			},
			getAuctionInfo() {
				this.$api.getAuctionInfo({auctionId:this.auctionId}).then(res => {
					console.log(res)
					if (res.code == 200) {
						if (res.data.auctionModel) {
							let auctionModel = res.data.auctionModel;
							res.data.mtlModel = auctionModel.substr(0,auctionModel.length-3) + 'mtl';
						}
						this.bzj = (res.data.auctionStartPrice * 0.1).toFixed(2)
						this.auctionData = res.data;
						this.oncePrice = this.auctionData.auctionMinMarkup;
						if (this.auctionData.currentPrice) {
							this.myPriceNum = (Number(this.auctionData.currentPrice) + Number(this.auctionData.auctionMinMarkup)).toFixed(2);
							this.getInit()
						} else {
							this.myPriceNum = Number(this.auctionData.auctionStartPrice)
						}
					}
				})
			},
			tipsPopupOpen() {
				this.tipsShow = true;
			},
			tipsPopupClose() {
				this.tipsShow = false
				// console.log('close');
			},
			toPay(type) {
				// type 2 拍卖
				let price = 0;
				if (type) {
					price = this.auctionData.auctionBuyNow
					// 一口价
					this.$api.buyout({auctionId:this.auctionId}).then(res => {
						console.log(res)
						if (res.code == 200) {
							uni.navigateTo({
								url:`/pages/cashier/cashier?type=2&price=${res.data.price}&auctionId=${this.auctionId}&orderNo=${res.data.orderNo}`
							})
						}
					})
				} else {
					price = this.myPriceNum;
					this.offerPopupClose()
					// 出价
					// 出价大于等于一口价时，直接跳转一口价支付购买逻辑
					if (Number(this.myPriceNum) >= Number(this.auctionData.auctionBuyNow)) {
						// 一口价
						this.$api.buyout({auctionId:this.auctionId}).then(res => {
							console.log(res)
							if (res.code == 200) {
								uni.navigateTo({
									url:`/pages/cashier/cashier?type=2&price=${res.data.price}&auctionId=${this.auctionId}&orderNo=${res.data.orderNo}`
								})
							}
						})
					} else {
						console.log('出价')
						if (this.depositState != 1) {
							this.$api.deposit({
								auctionId:this.auctionId,
							}).then(res => {
								console.log(res)
								if (res.code == 200) {
									uni.navigateTo({
										url:`/pages/cashier/cashier?type=2&bzj=${res.data.price}&auctionId=${this.auctionId}&orderNo=${res.data.orderNo}`
									})
								}
							})	
						} else {
							this.$api.auctionBid({
								auctionId:this.auctionId,
								bidPrice:price
							}).then(res => {
								console.log(res)
								if (res.code == 200) {
									this.successShow = true;
								}
							})
						}
					}
				}				
			},
			onChange(e) {
				this.timeData = e
			},
			recordOpen(e) {
			  // console.log('open', e)
			},
			recordClose(e) {
			  // console.log('close', e)
			},
			recordChange(e) {
			  // console.log('change', e)
			},
			offerPopupOpen() {
				
				this.offerShow = true;
			},
			offerPopupClose() {
				this.offerShow = false
				// console.log('close');
			},
			optionPrice(type) {
				if (type == 1) {
					// 减
					// 存在当前价
					if (this.auctionData.currentPrice) {
						if (Number((Number(this.myPriceNum) - Number(this.oncePrice)).toFixed(2)) <= Number(this.auctionData.currentPrice)) {
							uni.showToast({
								title:'不能再减了',
								icon:'none'
							})
						} else {
							this.myPriceNum = Number((Number(this.myPriceNum) - Number(this.oncePrice)).toFixed(2));
						}
					} else {
						if (Number((Number(this.myPriceNum) - Number(this.oncePrice)).toFixed(2)) < Number(this.auctionData.auctionStartPrice)) {
							uni.showToast({
								title:'不能再减了',
								icon:'none'
							})
						} else {
							this.myPriceNum = Number((Number(this.myPriceNum) - Number(this.oncePrice)).toFixed(2));
						}
					}
				} else {
					// 加
					this.myPriceNum = Number((Number(this.myPriceNum) + Number(this.oncePrice)).toFixed(2));
				}
			},
			onLoading () {
				// 是否旋转
				this.rotate();
			},
			rotate () {
				this.rotation.y += 0.01;
				requestAnimationFrame( this.rotate );
			},
			getAuctionNewestPrice() {
				return new Promise((resolve, reject) => {
					this.$api.getAuctionNewestPrice({auctionId:this.auctionId}).then(res => {
						console.log(res)
						if (res.code == 200) {
							resolve(res.data)
						} else {
							reject(res.data)
						}
					})
				})
			},
			closeRealName(e) {
				this.isRealName = e;
			},
			successPopupClose() {
				this.successShow = false;
				uni.navigateTo({
					url:'/pages/myAuction/myAuction?type=2'
				})
			},
			successPopupOpen() {
				this.successShow = true;
			},
			confirmOk() {
				this.successShow = false;
				uni.navigateTo({
					url:'/pages/myAuction/myAuction?type=2'
				})
			}
		},
		onPageScroll(e) {
			clearTimeout(this.pageScrollTimer) // 每次滚动前 清除一次
			this.pageFooterFlag = false;  
			this.pageScrollTimer = setTimeout(() => { 
				// console.log('滚动结束了');
				this.pageFooterFlag = true; 
			}, 500);
		},
	}
</script>

<style lang="less" scoped>
	.auctionDetail{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		position: relative;
		display: flow-root;
		.lighting-bg{
			width: 100%;
			height: 422rpx;
			position: absolute;
			top: 0;
			z-index: 0;
			.lighting-bg-img{
				width: 100%;
				height: 100%;
			}
		}
		.auctionDetail-box{
			width: 100%;
			padding-bottom: 152rpx;
			display: flow-root;
		}
		.auction-time{
			position: fixed;
			width: 654rpx;
			height: 72rpx;
			background: rgba(0,0,0,0.5);
			border-radius: 36rpx;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			margin-top: 148rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
			z-index: 2;
		}
		.auctionDetail-3d-content{
			// width: 100%;
			// height: 636rpx;
			width: 440rpx;
			height: 440rpx;
			margin: 320rpx auto 0;
			position: relative;
			// background-color: #16181D;
			.auctionDetail-3d-content-model{
				position: absolute;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0);
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				z-index: 1;
			}
		}
		.collectionDetail-img-model{
			width:100%;
			height: 636rpx;
			margin-top: 200rpx;
			.collectionDetail-img-model-box{
				width:606rpx;
				height:606rpx;
				margin: 0 auto;
				position: relative;
			}
			._img-model{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 70rpx;
				z-index: 1;
				._img-model-box{
					width: 100%;
					height: 100%;
					position: relative;
					overflow: hidden;
					border-radius: 20rpx;
				}
				._img-model-bg{
					width: 100%;
					height: 100%;
				}
				._img-model-content{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					padding: 14rpx;
					._img-model-content_img{
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}
		.auctionDetail-3d-bottom{
			width: 100%;
			.auctionDetail-3d-bottom-box{
				display: block;
				width: 592rpx;
				height: 340rpx;
				margin: 0 auto;
				position: relative;
				.auctionDetail-3d-bottom-img{
					width: 100%;
					height: 100%;
				}
				.auctionDetail-info{
					width: 100%;
					height: 50%;
					position: absolute;
					bottom: 0;
					.auctionDetail-info-title{
						font-size: 40rpx;
						font-weight: 500;
						color: #FFFFFF;
						text-align: center;
						margin-top: 10rpx;
					}
					.auctionDetail-info-main{
						display: flex;
						flex-wrap: nowrap;
						justify-content: center;
						align-items: center;
						margin-top: 16rpx;
						._info-main-l{
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							padding: 8rpx 20rpx;
							background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
							border-radius: 50rpx;
							margin-right: 8rpx;
						}
						._info-main-r{
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							margin-left: 8rpx;
							._info-main-r-text{
								background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
								border-top-left-radius: 50rpx;
								border-bottom-left-radius: 50rpx;
								padding: 8rpx 20rpx;
								display: inline-block;
							}
							._info-main-r-num{
								background: #3C4456;
								border-top-right-radius: 50rpx;
								border-bottom-right-radius: 50rpx;
								padding: 8rpx 20rpx;
								display: inline-block;
							}
						}
					}
				}
			}
		}
		.auctionDetail-main{
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-top: 10rpx;
			.auctionDetail-main-box{
				width: 100%;
				.auctionDetail-price{			
					text-align: center;
					.auctionDetail-price-text{
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(255,255,255,0.49);
					}
					.auctionDetail-price-num{
						font-size: 60rpx;
						font-weight: 500;
						color: #A06AF9;
					}
				}
				.auctionDetail-business{
					width: 100%;
					padding: 32rpx 48rpx;
					background: #262A34;
					border-radius: 24rpx;
					margin-top: 68rpx;
					.auctionDetail-business-item{
						font-size: 28rpx;
						font-weight: 400;
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;
						.auctionDetail-business-item-label{	
							color: #5D5F7A;
						}
						.auctionDetail-business-item-val{
							color: #ffffff;
						}
					}
					.auctionDetail-business-item-top{
						margin-top: 16rpx;
					}
				}
				.auctionDetail-main-chunk{
					width: 100%;
					margin-top: 48rpx;
					.auctionDetail-main-chunk-header{
						font-size: 36rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
					.auctionDetail-main-chunk-content{
						margin-top: 16rpx;
						width: 100%;
						// height: 844rpx;
						background: #262A34;
						border-radius: 24rpx;
						padding: 48rpx;
						box-sizing: border-box;
						.auctionDetail-main-chunk-content-box{
							width: 100%;
							height: 100%;
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(255,255,255,0.7);
						}
					}
				}
				.auctionDetail-record{
					background: #262A34;
					border-radius: 12px;
					margin-top: 32rpx;
					/deep/.u-cell__body{
						padding: 16px 19px 16px 24px;
						font-size: 28rpx;
						.u-cell__title-text{
							color: #ffffff;
							font-size: 28rpx;
						}
						.u-icon__icon--info{
							color: #ffffff;
						}
					}
					/deep/.u-cell--clickable{
						background-color: rgba(0,0,0,0);
					}
					/deep/.u-collapse-item__content__text{
						padding: 0 30rpx 24rpx;
					}
					.u-collapse-content{
						padding: 0 0 0 20rpx;
						.collapse-content-item{
							display: flex;
							flex-wrap: nowrap;
							justify-content: space-between;
							align-items: center;
							font-size: 28rpx;
							font-weight: 400;
							margin-bottom: 16rpx;
							.collapse-content-item-name{
								color: #5D5F7C;
								display: flex;
								flex-wrap: nowrap;
								justify-content: flex-start;
								align-items: center;
								._name-my{
									padding: 6rpx 20rpx;
									background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
									border-radius: 25px;
									font-size: 24rpx;
									color: #FFFFFF;
									margin-left: 16rpx;
								}
							}
							.collapse-content-item-money{
								color: #FFFFFF;
								text-align: right;
							}
						}
					}
				}
			}
		}
		.page-footer{
			width: 100%;
			height: 152rpx;
			background: #202227;
			filter: blur(0px);
			position: fixed;
			bottom: 0;
			left: 0;
			transition: all 0.5s linear;
			.page-footer-box{
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding: 32rpx;
				box-sizing: border-box;
				.page-footer-box-l{
					flex: 1;
					.page-footer-box-l-label{
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(255,255,255,0.59);
						margin-top: 6rpx;
					}
					.page-footer-box-l-val{
						font-size: 32rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
				.page-footer-box-r{
					width: 512rpx;
					height: 88rpx;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;	
					.page-footer-box-r-btn{
						border-radius: 45rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: #FFFFFF;
						text-align: center;
						width: 248rpx;
					}
					.page-footer-box-r-btn-l{
						background: linear-gradient(228deg, #F0B04D 0%, #F28348 100%);
						line-height: 88rpx;
					}
					.page-footer-box-r-btn-r{
						background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
						display: flex;
						flex-direction: column;
						justify-content: center;
						.page-footer-box-r-btn-r-money{
							font-size: 20rpx;
						}
					}
				}
				.page-footer-box-r-no{
					.page-footer-box-r-btn{
						opacity: 0.4;
					}
				}
			}
		}
		.page-footer-bottom{
			bottom: -152rpx;
		}
	}
	.tipsPopup{
		width: 508rpx;
		height: 596rpx;
		background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
		border-radius: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		.tipsPopup-icon{
			width: 200rpx;
			height: 200rpx;
			margin: 68rpx auto 24rpx;
			.tipsPopup-icon-img{
				width: 100%;
				height: 100%;
			}
		}
		.tipsPopup-title{
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}
		.tipsPopup-text{
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255,255,255,0.8);
			text-align: center;
			margin-top: 16rpx;
		}
		.tipsPopup-confirm{
			width: 328rpx;
			height: 88rpx;
			margin: 36rpx auto 0;
			border-radius: 45rpx;
			background-color: #ffffff;
			font-size: 32rpx;
			font-weight: 500;
			color: #6A47F1;
			line-height: 88rpx;
			text-align: center;
		}
	}
	.offerPopup{
		width: 100%;
		height: 594rpx;
		border-top-left-radius: 48rpx;
		border-top-right-radius: 48rpx;
		background: #262A34;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		.offerPopup-line{
			width: 176rpx;
			height: 8rpx;
			margin: 16rpx auto 0;
			background: #5E6272;
			border-radius: 200rpx;
		}
		.offerPopup-new-money{
			display: flex;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			margin-top: 90rpx;
			.offerPopup-new-money-text{
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(255,255,255,0.49);
			}
			.offerPopup-new-money-num{
				font-size: 48rpx;
				font-weight: 500;
				color: #A06AF9;
			}
		}
		.offerPopup-main{
			width: 100%;
			padding: 0 90rpx;
			box-sizing: border-box;
			.offerPopup-main-box{
				width: 100%;
				.offerPopup-main-option-price{
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					margin-top: 64rpx;
					._option-price-btn{
						width: 120rpx;
						height: 120rpx;
						background: #181A20;
						border-radius: 50%;
						text-align: center;
						line-height: 120rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: #FFFFFF;
						transition: all 0.5s linear;
					}
					._option-price-btn:active{
						background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
					}
					._option-price-view{
						width: 288rpx;
						height: 96rpx;
						background: #181A20;
						border-radius: 60rpx;
						text-align: center;
						line-height: 96rpx;
						font-size: 36rpx;
						font-family: Helvetica;
						color: #FFFFFF;
					}
				}
				.offerPopup-confirm{
					width: 100%;
					height: 88rpx;
					background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
					border-radius: 50rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					margin-top: 64rpx;
				}
			}
		}
	}
	
	.successPopup{
		width: 590rpx;
		height: 610rpx;
		background: #262A34;
		border-radius: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		position: relative;
		padding: 0 86rpx;
		box-sizing: border-box;
		.tipsPopup-icon{
			width: 168rpx;
			height: 168rpx;
			margin: 68rpx auto 24rpx;
			.tipsPopup-icon-img{
				width: 100%;
				height: 100%;
			}
		}
		.tipsPopup-title{
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}
		.tipsPopup-text{
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
			margin-top: 44rpx;
		}
		.tipsPopup-confirm{
			width: 406rpx;
			height: 88rpx;
			margin: 68rpx auto 0;
			background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
		}
		.cancel-icon{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 40rpx;
			right: 48rpx;
		}
	}
	
	.no-box{
		width: 654rpx;
		height: 72rpx;
		background: rgba(255, 86, 86, 0.9);
		border-radius: 36rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
		text-align: center;
		position: fixed;
		left: 0;
		right:0;
		top: 0;
		bottom: 0;
		margin: auto;
		margin-top: 148rpx;
		z-index: 2;
	}
</style>
